<template>
  <div class="milk-notice-wrapper">
    <template v-for="(v,i) in systemNotice">
      <v-alert
        v-if="v.type==='success'"
        v-model="v.show"
        :key="i"
        dismissible
        close-icon="mdi-close"
        width="340"
        color="#89eabd"
        border="left"
        elevation="2"
        colored-border
        dense
        icon="mdi-checkbox-marked-circle"
        prominent
        transition="scale-transition"
      >
        {{v.msg}}
      </v-alert>

      <v-alert
        v-if="v.type==='error'"
        v-model="v.show"
        :key="i"
        dismissible
        close-icon="mdi-close"
        width="340"
        color="#f28076"
        border="left"
        elevation="2"
        colored-border
        dense
        icon="mdi-alert"
        prominent
        transition="scale-transition"
      >
        {{v.msg}}
      </v-alert>

      <v-alert
        v-if="v.type==='info'"
        v-model="v.show"
        :key="i"
        dismissible
        close-icon="mdi-close"
        width="340"
        color="#7cdef4"
        border="left"
        elevation="2"
        colored-border
        dense
        icon="mdi-message-text"
        prominent
        transition="scale-transition"
      >
        {{v.msg}}
      </v-alert>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'MilkNotice',
  computed: {
    ...mapState('milk/notice', [
      'systemNotice'
    ])
  },
  data: () => ({})
}
</script>

<style>
  .milk-notice-wrapper {
    position: absolute;
    z-index: 999;
    top: 60px;
    right: 0;
    padding: 10px;
    width: 360px;
    overflow: hidden;
  }

</style>
